<template>
    <div style="border:1px solid #ddd;padding:10px 36px 80px;box-shadow:2px 2px 10px #ddd;background:#fff;">
        <h3 style="text-align:center;margin:10px auto;">图纸会审记录表</h3>
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
            <el-form-item label="工程名称"> <el-input v-model="form.name" style="width:450%"></el-input> </el-form-item>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期" style="float:right"> </el-date-picker>
        </el-form>

        <div class="title_table">
            <div class="box_grandpa">
                <span>参加单位</span>
            </div>
            <div class="box_grandpa">
                <div class="box_dad">
                    <span>建设单位</span>
                </div>
                <div class="box_dad">
                    <span>监理单位</span>
                </div>
            </div>
            <div class="box_grandpa">
                <div class="box_dad">
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                </div>
                <div class="box_dad">
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                </div>
            </div>
            <div class="box_grandpa">
                <div class="box_dad">
                    <span>设计单位</span>
                </div>
                <div class="box_dad">
                    <span>施工单位</span>
                </div>
            </div>
            <div class="box_grandpa">
                <div class="box_dad">
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                </div>
                <div class="box_dad">
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                </div>
            </div>
        </div>

        <el-table :data="answertableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
            <el-table-column prop="number" label="图纸编号" width="180"> </el-table-column>
            <el-table-column prop="name" label="图纸名称"> </el-table-column>
            <el-table-column prop="comment" label="存在问题"> </el-table-column>
            <el-table-column prop="result" label="会审结论"> </el-table-column>
        </el-table>
        <div class="chapter">
            <!-- <img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607487864329&di=b19e380c9a726f7b006e220ff62f7f96&imgtype=0&src=http%3A%2F%2Fwww.yinzhang8.com.cn%2Fuploads%2Fallimg%2F130819%2F3_130819233618_1.jpg"
                alt=""
            />
             <img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607487864329&di=b19e380c9a726f7b006e220ff62f7f96&imgtype=0&src=http%3A%2F%2Fwww.yinzhang8.com.cn%2Fuploads%2Fallimg%2F130819%2F3_130819233618_1.jpg"
                alt=""
            />
             <img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607487864329&di=b19e380c9a726f7b006e220ff62f7f96&imgtype=0&src=http%3A%2F%2Fwww.yinzhang8.com.cn%2Fuploads%2Fallimg%2F130819%2F3_130819233618_1.jpg"
                alt=""
            />
             <img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607487864329&di=b19e380c9a726f7b006e220ff62f7f96&imgtype=0&src=http%3A%2F%2Fwww.yinzhang8.com.cn%2Fuploads%2Fallimg%2F130819%2F3_130819233618_1.jpg"
                alt=""
            /> -->
        </div>
        <div class="title_table_second">
            <div class="box_grandpa">
                <span>代表签名：</span>
            </div>
            <div class="box_grandpa">
                <div class="box_dad">
                    <span>建设单位</span>
                </div>
                <div class="box_dad">
                    <span>监理单位</span>
                </div>
            </div>
            <div class="box_grandpa">
                <div class="box_dad">
                    <el-input v-model="input" placeholder="请输入签名"></el-input>
                </div>
                <div class="box_dad">
                    <el-input v-model="input" placeholder="请输入签名"></el-input>
                </div>
            </div>
            <div class="box_grandpa">
                <div class="box_dad">
                    <span>设计单位</span>
                </div>
                <div class="box_dad">
                    <span>施工单位</span>
                </div>
            </div>
            <div class="box_grandpa">
                <div class="box_dad">
                    <el-input v-model="input" placeholder="请输入签名"></el-input>
                </div>
                <div class="box_dad">
                    <el-input v-model="input" placeholder="请输入签名"></el-input>
                </div>
            </div>
        </div>

        <div style="float:right;margin-top:20px">
            <el-button plain>上传电子章</el-button>
            <el-button plain>上传电子签名</el-button>
            <el-button type="primary" plain>提交</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: { name: null },
            value1: null,
            answertableData: []
        };
    },
    mounted() {
        let me = this;
        me.answertableData = sessionStorage.getItem('answer');
        if (me.answertableData === null || me.answertableData === undefined) {
            me.answertableData = [];
        } else {
            me.answertableData = JSON.parse(me.answertableData);
        }
    },
    methods: {
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex % 2 === 0) {
                if (columnIndex === 0) {
                    return [1, 2];
                } else if (columnIndex === 1) {
                    return [0, 0];
                }
            }
        },

        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        }
    }
};
</script>

<style>
.content {
    overflow: auto;
}
.title_table,
.title_table_second {
    display: flex;
    box-sizing: border-box;
    justify-content: flex-end;
}

.title_table .box_grandpa {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-align: center;
    width: 20%;
    height: 80px;
    line-height: 40px;
}
.title_table .box_grandpa:nth-child(1) {
    line-height: 80px;
}
.title_table .box_dad {
    border: 1px solid #eee;
    border-bottom: none;
}
.title_table input {
    width: 80%;
    border: none;
}
.el-table {
    margin-top: 0px !important;
}
.title_table_second .box_grandpa {
    margin-top: 30px;
    text-align: center;
    width: 18%;
    height: 80px;
    line-height: 40px;
}
.title_table_second .box_grandpa:nth-child(1) {
    text-align: right;
}
.title_table_second input {
    width: 100%;
    border: none;
}
.chapter{
    margin-top: 20px;
    float: left;
}
.chapter img {
    height: 120px;
    border-radius: 50%;
    margin-right: 10px;
}
</style>
